<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      canvas {
        border: 1px solid #9C9898;
      }
      #tango {
        position: absolute;
        top: 10px;
        left: 10px;
        padding: 10px;
      }
      #container {
        background-image: url('http://www.html5canvastutorials.com/demos/assets/map-background.png');
        display: inline-block;
        overflow: hidden;
        height: 262px;
        width: 580px;
        background-position: 1px 1px;
		border:1px solid #ccc;
      }
    </style>
    <script src="kinetic-v3.10.4.js"></script>
    <script src="worldMap.js"></script>
    <script>
      window.onload = function() {
        var stage = new Kinetic.Stage({
          container: 'container',
          width: 578,
          height: 260
        });
        var mapLayer = new Kinetic.Layer({
          y: 20,
          scale: 0.6
        });

        /*
         * loop through country data stroed in the worldMap
         * variable defined in the worldMap.js asset
         */
        for(var key in worldMap.shapes) {
          var path = new Kinetic.Path({
            data: worldMap.shapes[key],
            fill: '#ccc',
            stroke: '#555',
            strokeWidth: 1
          });

          path.on('mouseover', function() {
            this.setFill('red');
            mapLayer.draw();
          });

          path.on('mouseout', function() {
            this.setFill('#ccc');
            mapLayer.draw();
          });

          mapLayer.add(path);
        }

        stage.add(mapLayer);
      };

    </script>
  </head>
  <body>
    <div id="container"></div>
  </body>
</html>
